<template>
  <div class="descriptions">
    <a-descriptions
      :title="title"
      :column="column"
      :bordered="bordered"
      :size="size"
      :layout="layout"
      :colon="colon"
    >
      <template v-for="item in columns">
        <template v-if="!item.hidden">
          <a-descriptions-item
            v-if="item.slot"
            :span="item.span"
            :key="item.prop"
          >
            <template v-slot:label>
              <span :style="labelStyle" class="inline-b">{{ item.label }}</span>
            </template>
            <slot :name="item.slot" />
          </a-descriptions-item>
          <a-descriptions-item v-else :span="item.span" :key="item.prop">
            <template v-slot:label>
              <span :style="labelStyle" class="inline-b">{{ item.label }}</span>
            </template>
            <span>{{
              $tools.notEmpty(data[item.prop]) ? data[item.prop] : "--"
            }}</span>
          </a-descriptions-item>
        </template>
      </template>
    </a-descriptions>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ""
    },
    column: {
      type: Number,
      default: 4
    },
    columns: {
      type: Array,
      default: () => {
        return [];
      }
    },
    data: {
      type: Object,
      default: () => {
        return {};
      }
    },
    bordered: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: "default"
    },
    layout: {
      type: String,
      default: "horizontal"
    },
    colon: {
      type: Boolean,
      default: true
    },
    labelStyle: {
      type: Object,
      default: () => {
        return {};
      }
    }
  }
};
</script>

<style lang="scss" scoped>
// 内容超出时，只有超出部分会换行
::v-deep span.ant-descriptions-item-content {
  display: inline;
}
::v-deep th.ant-descriptions-item-label {
  background-color: rgba(243, 249, 252);
}
</style>
